<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            background-color: aqua;
        }
    </style>
</head>
<!--vue对象的html模版-->
<body>
<div id="app">
    <!--双向绑定 v-model @keyup.13回车键弹出时事件，你也可以写成@keyup.enter -->
    <input type="text" v-model="num" @keyup.13="submit">
    <!--绑定一个点击事件 v-on:事件名=js表达式-->
    <input type="button" value="点我" v-on:click="incr">
    <input type="button" value="点我也是一样" @click="incr">
    <input type="button" value="鼠标右键也可以哦" @contextmenu="incr($event)">
    <input type="button" value="使用修饰符禁用了右键默认事件的按钮" @contextmenu.prevent="incrP">
    <!--大括号：js表达式-->
    <h1>你好骚啊！{{name}}，{{num}}位观众也是这么觉得。</h1>
    <!--插值表达式里面如果是一个方法，那么这个方法一定要有返回值。并且因为是方法，一定要加上小括号-->
    <h1>{{sum()}}位观众给你点赞！</h1>
    <!--使用 v-text或者v-html来解决插值闪烁，使用v-html可以解析html标签文本-->
    <h1><span v-text="zhang">吃屎吧你</span>觉得也很不错</h1>
    <hr/>
    <input type="checkbox" value="ios" v-model="language">ios<br>
    <input type="checkbox" value="java" v-model="language">java<br>
    <input type="checkbox" value="php" v-model="language">php<br>
    <h1>你选择的语言是{{language.join(",")}}</h1>
    <hr>
    <h1>v-for循环</h1>
    <h2>遍历数组</h2>
    <ul>
        <!-- :key="index" 是为了提高遍历的效率,也可以与v-if结合使用 -->
        <li v-if="user.gender == '女'" v-for="(user,index) in users" :key="index">{{index+1}}. 姓名：{{user.name}}；
            性别：{{user.gender}}；
            年龄：{{user.age}}；
        </li>
    </ul>
    <hr>
    <h2>遍历对象</h2>
    <ul>
        <li v-for="(val,key,index) in user" :key="index">{{index+1}}. {{key}}：{{val}}</li>
    </ul>
    <br>
    <hr>
    <h1>v-if v-show</h1>
    <input type="button" value="点我显示或隐藏" @click="show = !show">
    <br>
    <span v-if="show">你可以看到我 v-if</span>
    <br>
    <span v-show="show">你还是可以看到我 v-show</span>
    <hr>
    <input type="button" value="点我生成一个随机数" @click="random = Math.random()">{{random}}
    <br>
    <!--注意，如果是使用v-else-if，那么两个标签中间绝对不可以有其它标签-->
    <span v-if="random > 0.75">黄瓜：你可以看到我 是因为这个数大于0.75</span>
    <span v-else-if="random > 0.5">茄子：你可以看到我 是因为这个数大于0.5</span>
    <span v-else-if="random > 0.25">波菜：你可以看到我 是因为这个数大于0.25</span>
    <span v-else>萝卜：你可以看到我 是因为这个数大于0</span>
    <hr>
    <!--使用v-bind来在标签内使用数据模型-->
    <input type="button" v-bind:value="value">
    <h1>使用v-bind动态获取属性</h1>
    <input type="text" v-model="store">
    <!--如果store大于0时给标签添加class样式，v-bind:class可以简写成 :class，如果有默认样式，{active: true}-->
    <input type="button" value="store > 0时显示为蓝色" v-bind:class="{active: store > 0}">
    <h1>计算属性，时间戳</h1>
    <p>{{new Date(birthday).getFullYear() + "年" + new Date(birthday).getMonth() + "月" + new Date(birthday).getDay()
        +"日"}}</p>
    <p>使用方法，获取年月日： {{birth()}}</p>
    <p>使用计算属性，获取年月日： {{birth01}}</p>
    <h1>watch监控</h1>
    <input type="text" v-model="search">
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //初始化一个vue实例
    const app = new Vue({
        el: "#app", //element，元素选择器
        data: { //定义数据模型
            name: "洪世贤",
            num: 100,
            zhang: "学友哥",
            //像多选框这种有多个值时使用数组
            language: [],
            users: [
                {name: '柳岩', gender: '女', age: 21},
                {name: '峰哥', gender: '男', age: 18},
                {name: '范冰冰', gender: '女', age: 24},
                {name: '刘亦菲', gender: '女', age: 18},
                {name: '古力娜扎', gender: '女', age: 25}
            ],
            user: {name: '柳岩', gender: '女', age: 21},
            show: true,
            random: 1,
            value: "能不能看到我很变态",
            store: 0,
            birthday: 1529032123201,  //毫秒值
            search: ""
        },
        //监控，里面的方法名必须要与监控的数据模型一致
        watch: {
            search(newVal, oldVal) {
                //可以在这里发送ajax给后端
                alert("新的值：" + newVal + "，旧的值： " + oldVal);
            }
        },
        methods: { //包含的所有方法
            incr(ev) {
                //禁用浏览器的右键点击事件
                ev.preventDefault();
                this.num++;
            },
            incrP() {
                this.num++;
            },
            sum() {
                return this.num + 1000;
            },
            submit() {
                alert("你已经提交了")
            },
            birth() {
                const date = new Date(this.birthday);
                return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDay() + "日"
            }
        },
        //计算属性，里面的方法一定要有返回值
        computed: {
            birth01() {
                const date = new Date(this.birthday);
                return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDay() + "日"
            }
        },
        //模型对象创建之后未渲染时的初始化方法，可以在这里作一些操作。比通过ajax如向后端请求数据
        created() {
            //ajax
            //模型在加载完数据后进行初始化时，这里又重新赋值了变量，这里的赋值会覆盖掉前面加载的
            this.num = 10000;
        }
    })
</script>
</html>